<template>
  <div class="page_main">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb>
    <el-card>
      <div class="card_content">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
        <div class="table" v-if="treeNodeId">
          <div class="nav">
            <div class="nav_left">
              <el-input
                placeholder="姓名/账号/手机号"
                prefix-icon="el-icon-search"
                v-model="keyword"
              >
              </el-input>
              <el-select v-model="positionVal" placeholder="选择职务">
                <el-option
                  v-for="item in positionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select v-model="statusVal" placeholder="选择状态">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-date-picker
                style="margin-right: 10px"
                v-model="dateVal"
                type="daterange"
                range-separator="至"
                start-placeholder="最后登录开始日期"
                end-placeholder="最后登录结束日期"
              >
              </el-date-picker>
              <el-button type="primary" icon="el-icon-search">查询</el-button>
              <el-button icon="el-icon-search">重置</el-button>
            </div>
          </div>
          <div class="table_nav">
            <el-button type="primary" icon="el-icon-plus">新增员工</el-button>
            <el-button icon="el-icon-edit">修改部门</el-button>
            <el-button icon="el-icon-edit-outline">修改职务</el-button>
            <el-button icon="el-icon-setting">设置状态</el-button>
            <el-button icon="iconfont icon-mima">重置密码</el-button>
            <el-button icon="el-icon-upload2">导入数据</el-button>
          </div>
          <lei-table
            :tableData="tableData"
            :columns="columns"
            :pageObj="pageObj"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            clear
            del
            :select="true"
          >
            <el-table-column slot="status" label="状态" align="center">
              <template slot-scope="scope">
                <el-button type="default">默认</el-button>
                <el-button type="primary">设置</el-button>
              </template>
            </el-table-column>
            <el-table-column
              slot="operation"
              label="操作"
              align="center"
              width="300"
            >
              <template slot-scope="scope">
                <div class="operation">
                  <el-button
                    type="default"
                    size="mini"
                    icon="el-icon-arrow-right"
                    >详情</el-button
                  >
                  <el-button type="primary" size="mini" icon="el-icon-edit"
                    >编辑</el-button
                  >
                  <el-button type="primary" size="mini" icon="el-icon-setting"
                    >设置</el-button
                  >
                  <el-button type="warning" size="mini" icon="el-icon-delete"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </lei-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePath: {
        path: '',
        title: '平台管理',
      },
      data: [
        {
          label: '公司名称',
          children: [
            {
              label: '总裁办',
              children: [
                {
                  label: '华南区域',
                  children: [
                    {
                      label: '华南一部',
                    },
                    {
                      label: '华南二部',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      treeNodeId: '',
      positionVal: '',
      positionList: [
        { label: '销售部', label: 1 },
        { label: '财务部', label: 2 },
      ],

      keyword: '',

      statusVal: '',
      statusList: [
        { label: '启用状态', label: 1 },
        { label: '禁用状态', label: 2 },
        { label: '在线状态', label: 3 },
        { label: '离线状态', label: 4 },
      ],
      dateVal: '',

      pageObj: {
        pageNum: 1,
        pageSize: 10,
        total: 100,
      },
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      columns: [
        { label: '姓名', prop: 'date' },
        { label: '部门', prop: 'name' },
        { label: '职务', prop: 'name' },
        { label: '账号状态', prop: 'address' },
        { label: '手机', prop: 'hobby' },
        { label: '在线状态', prop: 'hobby' },
        { label: '最后登录', prop: 'hobby' },
        { slot: 'operation' },
      ],
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
      this.treeNodeId = data.$treeNodeId
    },

    handleSizeChange(val) {},

    handleCurrentChange(val) {},
  },
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .nav_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 160px;
      margin-right: 10px;
    }
    .el-select {
      margin-right: 10px;
    }
  }
}
.table_nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 10px 0;
  .el-button {
    margin-right: 10px;
  }
}
.card_content {
  display: flex;
}
.el-tree {
  width: 180px;
}
.table {
  flex: 1;
  // height: 200px;
  margin-left: 10px;
}
.operation {
  display: flex;
  overflow-y: auto;
}
</style>